Graphical Java Lesson 1-2: Making Programs Interactive with the Keyboard 


In Lesson 1-1, you learned how to make GUI programs, in Java. However, those programs could only 
display pictures. You couldn't interact with them, using the mouse or keyboard, in any meaningful way. 
For example, you couldn't move a rectangle around on the screen, by pressing the arrow keys. In this 
lesson, you will learn how to make programs that respond to keyboard input. 


Let's create a new project: Moving Rectangle. In this program, you will draw a rectangle on the 
screen. Using the arrow keys, you will be able to move this rectangle around the content pane of your 


program's main window. 


First, we're going to make our program's main window. Import the JFrame class, with the following 
import statement: 


import javax.swing.JFrame; 
In your program's main method, write the following lines of code: 
JFrame main window = new JFrame("Moving Rectangle"); 


main window.setDefaultCloseOperation (JFrame.EXIT ON CLOSE) ; 
main window.setSize(320, 200); 


Next, we're going to give our window a useful content pane. Let's create a new class: Content Pane. 
After you have created the Content Pane class, go to your ContentPane. java source file. 
Import the JPanel, Graphics, and Color classes, with the following import statements: 


import javax.swing.JPanel; 
import java.awt.Graphics; 
import java.awt.Color; 


Let's make our Content Pane class a better version of the JPanel class, by having it extend 
JPanel. Change... 


public class ContentPane 
.. to: 


public class ContentPane extends JPanel 


Give your Content Pane class this constructor ... 


public ContentPane () 
{ 
super (null, true); 


} 


... by placing the above code in the body of the ContentPane class. Let's also override the 


paintComponent method of JPanel again, by adding the following code to the body of the 
ContentPane class: 


protected void paintComponent (Graphics g) 


{ 


g.setColor(Color.RED) ; 
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Now, your Content Pane class should look like: 


public class ContentPane extends JPanel { 
public ContentPane () 
{ 
super (null, true); 


} 


protected void paintComponent (Graphics g) 


{ 


g.setColor(Color.RED) ; 
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We now need to give our main window a Content Pane object to use. Go to your 


MovingRectangle. java source file. At the end of your program's main method, add the 
following lines of code: 


main window.setContentPane (new ContentPane()); 
main window.setVisible (true) ; 


The body of your main method should look like: 


JFrame main window = new JFrame("Moving Rectangle") ; 

main window.setDefaultCloseOperation (JFrame.EXIT ON CLOSE); 
main window.setSize(320, 200); 

main window.setContentPane (new ContentPane()); 

main window.setVisible (true) ; 


Run your program. It should look like: 
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The program draws a red filled rectangle. The top-left corner of the rectangle is at (150, 90), and the 
width and height of the rectangle are both 20 pixels. However, if you press keys on your keyboard, 
nothing happens. Obviously, nothing happens, because this program's code is not set up to process 
keypresses! 


Let's get this rectangle moving! Make sure you are in your MovingRectangle. java source file. 
Our program always draws the rectangle in the same place. We want to change this. Since Java contains 
a built-in Rectangle class (in the java. awt package), you won't have to make your own. Import 
the Rectangle class, with the following import statement: 


import java.awt.Rectangle; 


In the body of the MovingRectangle class, but OUTSIDE OF the main method, add the following 
line of code: 


public static Rectangle my rect; 


I would put this line BEFORE the main method. We are going to treat our rectangle like a character in 
a video game. Our rectangle will be called my rect, and whenever we draw it, we will use whichever 
coordinates are stored in its variable, my rect, rather than a fixed set of coordinates. In the main 

method, BEFORE the code that creates your program's main window, insert the following line of code: 


my rect = new Rectangle(150, 90, 20, 20); 


This statement creates anew Rectangle object, with a top-left corner at (150, 90), a width of 20 
pixels, and a height of 20 pixels, and stores it in the variable, my rect. 


Before continuing, check that you have the following import statements in your 
MovingRectangle. java source file: 


import javax.swing.JFrame; 
import java.awt.Rectangle; 


Your MovingRectangle class (leaving out any comments) should look like: 


public class MovingRectangle { 
public static Rectangle my rect; 


de 


public static void main(String[] args) { 

my rect = new Rectangle(150, 90, 20, 20); 

JFrame main window = new JFrame("Moving Rectangle"); 

main window.setDefaultCloseOperation (JFrame.EXIT ON CLOSE); 
main window.setSize(320, 200); 

main window.setContentPane (new ContentPane()); 

main window.setVisible (true) ; 


} 
} 


Now, go to your Content Pane. java source file. Replace this line of code ... 
g.fillRect (150, 90, 20, 20); 
... with this: 


g.f111Rect (MovingRectangle.my rect.x, MovingRectangle.my rect.y, 
MovingRectangle.my rect.width, MovingRectangle.my rect.height) ; 


That's a LONG line of code! Instead of using a fixed set of coordinates to draw our rectangle, we are 
now using whichever coordinates are currently stored inmy_ rect, which belongs to the 
MovingRectangle class. Look at the declaration in the MovingRectangle class again: 


public static Rectangle my rect; 


The reserved word, static, indicates that my rect belongs to the MovingRectangle CLASS, 
rather than to any individual objects of type MovingRectangle (we haven't made any such objects). 
The reserved word, public, means thatmy rect can be accessed by ANY other code, even code 
that is OUTSIDE OF the MovingRectangle class. 


By making my rect both public and static, you have created a global variable. A global 
variable is a variable that can be accessed from ANYWHERE in your program's code. Be careful with 
global variables! If you are careful with them, they can simplify your code. But, if you are NOT careful 
with them, they can turn your code into a tangled mess, which will be hard to follow and debug! 


An object of type Rectangle holds four public member variables: 


* x and y, which contain the x- and y-coordinates of the top-left corner of the rectangle. 
* width and height, which contain the width and height of the rectangle. 


If you run your program, it should look and act the same as it did before. This is because all we did was 
refactor (rearrange) the code, to make it work better for what we are going to do next. 


We want to give our program the ability to respond to keyboard input. Let's create a new class: 
KBInputProcessor. After you have created the KBInput Processor class, go to your 
KBInputProcessor. java source file. YourkKBInputProcessor class starts out empty, as 
usual. We're going to have our main window /isten for keyboard input, and have an object of this class 
process that keyboard input, so that we can make things happen, when keys are pressed. 


We'll make our KBInputProcessor class a better version of the KeyAdapter class (in the 
jJava.awt.event package), by having it extend KeyAdapter. First, import the KeyAdapter 
class, with the following import statement: 


import java.awt.event.KeyAdapter; 


Then, change ... 


public class KBInputProcessor 


.. tO: 


public class KBInputProcessor extends KeyAdapter 


We won't need to write a constructor for this class, because it contains a built-in one that will work, for 
what we're going to do. Whenever a key is pressed, a "key pressed" event is fired by Java. If the main 
window is listening for "key pressed" events, the keyPressed method of our KBInput Processor 
class will be called by Java. Let's implement that keyPressed method. In the body of the 
KBInputProcessor class, add the following code: 


public void keyPressed(KeyEvent e) 
{ 


int key code = e.getKeyCode(); 
if (key code == KeyEvent.VK_LEFT) 
MovingRectangle.my rect.x = MovingRectangle.my rect.x - 1; 


Make sure you import the KeyEvent class (in the java.awt.event package), with the following 
import statement: 


import java.awt.event.KeyEvent; 


Whenever a key is pressed, the keyboard sends a special code to the computer, which then passes it to 
your program. Each key has its own special code. VK_ LEFT is a symbolic constant, whose value is the 
virtual key code of the left arrow key. When the left arrow key is pressed, we want to make our 
rectangle move to the left by one pixel. To do that, we subtract one from the x-coordinate of its top-left 
corner. We'll add code to process the other arrow keys later, but for now, ONLY the left arrow key will 
do anything interesting. 


Before we continue, make sure your KBInputProcessor. java source file contains the following 
import statements: 


import java.awt.event 
import java.awt.event 


.KeyAdapter; 
.KeyEvent; 
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Your KBInputProcessor class should look like: 


public class KBInputProcessor extends KeyAdapter { 
public void keyPressed(KeyEvent e) 
{ 
int key code = e.getKeyCode(); 


if (key code == KeyEvent.VK_ LEFT) 
MovingRectangle.my rect.x = MovingRectangle.my rect.x - 1; 


Run your program, and try pressing the left arrow key a few times. Nothing happens! Why doesn't it 
work? Again, we need to have our main window ACTUALLY USE a KBInputProcessor object, 
to listen for "key pressed" events! Go to your MovingRectangle. java source file. In your 
program's main method, before the call to set Visible, insert the following line of code: 


main window.addKeyListener (new KBInputProcessor()); 


Run your program again, and try pressing the left arrow key a few times. It still doesn't work! Try 
changing the size of your program's window. What?! It just moved a bit! But why didn't it move, 
when I pressed the left arrow key? When the program processed your keypresses, it changed the 
coordinates of the rectangle, ... but it didn't repaint the content pane of the window! When you resized 
the window, the content pane got repainted, which caused the rectangle to be redrawn in its new 
position. We want to make the program repaint the content pane, and thus move the rectangle on the 
screen, EVERY TIME the left arrow key gets pressed. 


When we process the pressing of the left arrow key, we need to call the repaint method of 

main window, to fire a "repaint" event. This will cause the main window's content pane to be 
repainted, which involves calling the paintComponent method of the ContentPane class. Notice 
how we don't call the paintComponent method ourselves! GUI programming is event-driven, 
which means that when events are fired (sometimes by our own code, like in this case), certain 
methods, called callbacks, are called BY JAVA, and given the information they need, by the system, to 
do their jobs. For example, when the left arrow key is pressed, a "key pressed" event, with a virtual key 
code of VK_LEFT, will be fired. In response, JAVA will call the keyPressed callback method, and 
pass ita KeyEvent object, which holds the virtual key code of VK_ LEFT. 


We need to add the statement, main window. repaint () ;, to the code in the keyPressed 
method of our KBInput Processor class. STOP! main window can only be accessed in the 
main method of ourMovingRectangle class! 


Some more refactoring is in order! If you are not already there, go to your 

MovingRectangle. java source file. Let's make our main window variable global, so that we 
can access it from ANYWHERE in the program. Under the line ... 

public static Rectangle my rect; 

... add the line: 


public static JFrame main window; 


Now, change the line ... 


JFrame main window = new JFrame("Moving Rectangle"); 
.. to: 
main window = new JFrame("Moving Rectangle"); 


Congratulations! You have just made main window a global variable! Your MovingRectangle 
class (leaving out any comments) should now look like: 


public class MovingRectangle { 

public static Rectangle my rect; 

public static JFrame main window; 

public static void main(String[] args) { 

my rect = new Rectangle(150, 90, 20, 20); 

main window = new JFrame("Moving Rectangle"); 

main window.setDefaultCloseOperation (JFrame.EXIT ON CLOSE); 
main window.setSize(320, 200); 


main window.setContentPane (new ContentPane()); 


main window.addKeyListener (new KBInputProcessor()); 
main window.setVisible (true) ; 


Now, go to your KBInputProcessor. java source file. In the keyPressed method of your 
KBInputProcessor class, change ... 


if (key code == KeyEvent.VK_ LEFT) 
MovingRectangle.my rect.x = MovingRectangle.my rect.x - 1; 
.. to: 
if (key code == KeyEvent.VK_LEFT) 
MovingRectangle.my rect.2 = MovingRectang le .my rect.x = 1; 


MovingRectangle.main window. repaint (); 


} 


Now, run your program, and try pressing the left arrow key a few times. The red rectangle finally 
moves to the left! Hallelujah! You can make it move faster, by holding down the left arrow key. When 
you want the rectangle to stop moving, let go of the left arrow key. 


When you press the left arrow key, a "key pressed" event gets fired, with a virtual key code of 
VK_LEFT. This causes the keyPressed method (a callback), in our KBInputProcessor class, to 
be called BY JAVA. In that method, first, we subtract one from the x-coordinate of the top-left corner of 
my rect, the global variable that contains the coordinates of our rectangle. Then, we fire a "repaint" 
event, by calling the repaint method of main window. This causes the paintComponent 
method (another callback), in our Content Pane class, to be called BY JAVA. Finally, our rectangle 
gets drawn at its new location, and thus, we see it "move" on the screen. 


Did you get all of that? After you press the left arrow key a bunch of times, or hold it down for a little 
while, your program's main window might look like: 


[EB Moving Rectangle alle 


Can you move the whole rectangle past the left side of the window? If so, is there any way to get it 
back on the screen, without exiting and restarting your program? Why or why not? 


If something isn't working, check the following: 


¢ Did you import the KeyAdapter and KeyEvent classes? Make sure your 
KBInputProcessor. java source file contains the following import statements: 


import 
import 


java.awt 
java.awt 


-event 
-event 


.KeyAdapter; 
.-KeyEvent; 


cr 
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* Does your KBInputProcessor class look like: 


public class KBInputProcessor extends KeyAdapter { 
public void keyPressed(KeyEvent e) 
{ 


int key code = e.getKeyCode(); 
if (key code == KeyEvent.VK_LEFT) 
{ 
MovingRectangle.my rect.x = MovingRectangle.my rect.x - 1; 


MovingRectangle.main_ window.repaint (); 


} 


* If your program still isn't working, try clicking somewhere in its window (NOT the NetBeans 
window!). This will give your program's window the keyboard focus. When a window has the 
keyboard focus, ALL keypresses will be directed to THAT window. ONLY ONE window at a 
time can have the keyboard focus. 


Let's make pressing the right arrow key move the rectangle to the right. If you are not already there, go 
to your KBInputProcessor. java source file. Add the following else if block to the END of 
the if statement, in the keyPressed method: 


elee 1f (key code == KeyEvent..VK RIGHT) 

{ 
MovingRectangle.my rect.x = MovingRectangle.my rect.x + 1; 
MovingRectangle.main window.repaint(); 


} 


Try running your program. Press the right arrow key a few times. Now, you can move your rectangle to 
the right, just like you were able to move it to the left before! VK_ RIGHT is a symbolic constant, 
whose value is the virtual key code of the right arrow key. Can you guess the names of the symbolic 
constants that hold the virtual key codes of the up and down arrow keys? The code in the above 
else if block is executed, when the right arrow key is pressed. We move our rectangle to the right 
by one pixel, by adding one to the x-coordinate of its top-left corner. Finally, we tell the program to 
repaint the screen, so we can see our rectangle move, by calling the repaint method of 

main window. 


Now, let's make our rectangle move up and down, when the up and down arrow keys are pressed. Add 
the following else if blocks to the end of the if statement, in the keyPressed method: 


elee if (key code == KeyEvent.VK_UP) 

{ 
MovingRectangle.my rect.y = MovingRectangle.my rect.y - 1; 
MovingRectangle.main window. repaint (); 

} 

else if (key code == KeyEvent.VK_DOWN) 

{ 
MovingRectangle.my rect.y = MovingRectangle.my rect.y + 1; 
MovingRectangle.main_ window. repaint (); 


} 


Run your program again, and try pressing the up and down arrow keys. You should now be able to 
move up, down, left, and right, when you press the up, down, left, and right arrow keys. As you can 
probably tell, VK_UP and VK_DOWN hold the virtual key codes of the up and down arrow keys. To 
move our rectangle up by one pixel, we subtract one from the y-coordinate of its top-left corner. To 
move our rectangle down by one pixel, we add one to the y-coordinate of its top-left corner. After we 
move our rectangle, we tell the program to repaint the screen, so we can see it move. 


The rectangle moves rather slowly; can you make it move faster? Can you make it move slower? 
What about making it move in reverse, so that it moves to the right, when you press the left 
arrow key, up, when you press the down arrow key, etc.? 


If any of the arrow keys aren't working, check that the code in the body of the keyPressed method 
of the KBInputProcessor class, in KBInputProcessor. java, looks like: 


int key code = e.getKeyCode(); 


af (key code == Keyevent.VE LEFT) 
{ 
MovingRectangle.my rect.x = MovingRectangle.my rect.x - 1; 


MovingRectangle.main window. repaint (); 
} 
else if (key code == KeyEvent.VK_ RIGHT) 
{ 


MovingRectangle.my rect.x = MovingRectangle.my rect.x + 1; 
MovingRectangle.main_ window. repaint (); 

} 

elee if (key code == KeyEvent.VK_ UP) 

{ 
MovingRectangle.my rect.y = MovingRectangle.my rectiy — 1; 
MovingRectangle.main window. repaint (); 


} 


else if (key code == KeyEvent.VK_DOWN) 
{ 


MovingRectangle.my rect.y = MovingRectangle.my rect.y + 1; 
MovingRectangle.main window. repaint (); 


} 


Let's add one more feature to this program. Let's put the rectangle back in its original position, 
whenever we press R (for "reset"). Add the following else if block to the end of the above 
if statement: 


else if (key code == KeyEvent.VK_R) 
{ 


MovingRectangle.my rect.x 150; 
MovingRectangle.my rect.y = 90; 
MovingRectangle.main window. repaint (); 


} 


Run your program. After pressing the arrow keys many times, press R. The rectangle should 
immediately move back to its original position. VK_R holds the virtual key code of the R key. How do 
you think you would use the other letter keys? What symbolic constants would hold their virtual 
key codes? To reset the position of the rectangle, we set the coordinates of its top-left corner to 

(150, 90). As always, we repaint the screen, after we move our rectangle. 


Feel free to play around with this code, although you might want to save a backup copy first, in case 
you mess something up, and don't know how to fix it. To see more virtual key codes, Google the 


following: 


Java KeyEvent class 


